<template>
  <view class="pages tn-safe-area-inset-bottom">
    <view
      class="tn-margin-left tn-margin-right tn-classify__wrap"
      :style="{ paddingTop: vuex_custom_bar_height + 'px' }"
    >
      <!-- 搜索框 -->
      <view
        class="tn-classify__search--wrap tn-flex tn-flex-col-center tn-flex-row-center tn-border-solids-bottom"
      >
        <view
          class="tn-classify__search__box tn-flex tn-flex-col-center tn-flex-row-center tn-bg-gray--light tn-color-gray--dark"
        >
          <view class="tn-classify__search__icon tn-icon-search"></view>
          <view class="tn-classify__search__text">请输入商品名称</view>
        </view>
      </view>

      <!-- 分类列表和内容 -->
      <view class="tn-classify__container">
        <view
          class="tn-classify__container__wrap tn-flex tn-flex-nowrap tn-flex-row-around"
        >
          <!-- 左边容器 -->
          <scroll-view style="border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.08);
    border: 0.5px solid #494B51;"
            class="tn-classify__left-box tn-flex-basic-sm"
            :scroll-top="leftScrollViewTop"
            scroll-y
            scroll-with-animation
            :style="{ height: scrollViewHeight + 'px' }"
          >
            <view
              v-for="(item, index) in tabbar"
              :key="index"
              :id="`tabbar_item_${index}`"  
              class="tn-classify__tabbar__item tn-flex tn-flex-col-center tn-flex-row-center"
              :class="[tabbarItemClass(index)]"
              @tap.stop="clickClassifyNav(index)"
            >
              <view class="tn-classify__tabbar__item__title">{{ item }}</view>
            </view>
          </scroll-view>

          <!-- 右边容器 -->
          <scroll-view
            class="tn-classify__right-box"
            scroll-y
            :scroll-top="rightScrollViewTop"
            :style="{ height: scrollViewHeight + 'px' }"
          >
            <block
              v-if="
                classifyContent.subClassify &&
                classifyContent.subClassify.length > 0
              "
            >
              <view class="tn-classify__content">
                <!-- 推荐商品轮播图 -->
                <view class="tn-classify__content__recomm">
                  <tn-swiper
                    v-if="classifyContent.recommendProduct.length > 0"
                    class="tn-classify__content__recomm__swiper"
                    :list="classifyContent.recommendProduct"
                    :height="200"
                    :effect3d="true"
                  ></tn-swiper>
                </view>

                <!-- 分类内容子栏目 -->
                <view
                  v-for="(item, index) in classifyContent.subClassify"
                  :key="index" 
                  class="tn-classify__content__sub-classify"
                >
                  <view style="color:white" 
                    :id="`tabbar_item_title_${index}`"
                    class="tn-classify__content__sub-classify--title tn-text-lg tn-padding-top-sm"
                    >{{ item.title }}</view
                  >

                  <view   
                    class="tn-classify__content__sub-classify__content tn-flex tn-flex-wrap tn-flex-col-center tn-flex-row-left"
                  >
                    <view 
                      v-for="(sub_item, sub_index) in item.classify"
                      :key="sub_index"
                      class="tn-classify__content__sub-classify__content__item tn-flex tn-flex-wrap tn-flex-row-center"
                    >
                      <view
                        class="tn-classify__content__sub-classify__content__image tn-flex tn-flex-col-center tn-flex-row-center"
                      >
                        <image :src="sub_item.image" mode="aspectFill"></image>
                      </view>
                      <view style="color:white"
                        class="tn-classify__content__sub-classify__content__title tn-margin-bottom-sm"
                        >{{ sub_item.title }}</view
                      >
                    </view>
                  </view>
                </view>
              </view>

              <view class="tn-padding-bottom"></view>
            </block>
          </scroll-view>
        </view>
      </view>
    </view>
    <view class="tn-tabbar-height"></view>
    <view class="bg-tabbar-shadow"></view>
  </view>
</template>

<script>
import template_page_mixin from "@/libs/mixin/template_page_mixin.js";
export default {
  name: "Classify",
  mixins: [template_page_mixin],
  data() {
    return {
      // 侧边栏分类数据
      tabbar: [
        "推荐分类",
        "医疗保健",
        "运动户外",
        "电脑办公",
        "家电",
        "宠物鲜花",
        "食品酒饮",
        "个护清洁",
        "手机",
        "数码",
        "母婴童装",
        "京东国际",
        "汽摩生活",
        "美妆护肤",
        "箱包",
        "鞋靴",
        "钟表珠宝",
        "玩具乐器",
        "内衣配饰",
        "生鲜",
        "家居厨具",
        "男装",
        "二手商品",
        "女装",
        "家具家装",
        "奢侈品",
        "计生情趣",
        "医药",
        "生活旅行",
        "图鸟服务",
      ],
      // 分类里面的内容信息
      classifyContent: {
        // 推荐商品
        recommendProduct: [
          {
            image: "https://resource.tuniaokj.com/images/shop/banner1.jpg",
            title: "推荐商品1",
          },
          {
            image: "https://resource.tuniaokj.com/images/shop/banner2.jpg",
            title: "推荐商品2",
          },
          {
            image: "https://resource.tuniaokj.com/images/shop/banner3.jpg",
            title: "推荐商品3",
          },
        ],
        // 子栏目
        subClassifyTabbar: [],
        // 显示子栏目分类选项
        showSubClassifyTabbar: false,
        // 每个子栏目下的内容
        subClassify: [
          {
            title: "推荐分类",
            classify: [
              {
                image:
                  "https://resource.tuniaokj.com/images/shop/prototype1.jpg",
                title: "海报设计",
              },
              {
                image:
                  "https://resource.tuniaokj.com/images/shop/prototype2.jpg",
                title: "精美页面",
              },
              {
                image:
                  "https://resource.tuniaokj.com/images/shop/computer1.jpg",
                title: "设计师电脑",
              },
              {
                image:
                  "https://resource.tuniaokj.com/images/shop/computer2.jpg",
                title: "轻薄本",
              },
              {
                image:
                  "https://resource.tuniaokj.com/images/shop/phonecase1.jpg",
                title: "5G手机",
              },
              {
                image:
                  "https://resource.tuniaokj.com/images/shop/phonecase2.jpg",
                title: "游戏手机",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/watch1.jpg",
                title: "智能手表",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/watch2.jpg",
                title: "运动手表",
              },
            ],
          },
          {
            title: "女装",
            classify: [
              {
                image:
                  "https://resource.tuniaokj.com/images/shop/phonecase1.jpg",
                title: "5G手机",
              },
              {
                image:
                  "https://resource.tuniaokj.com/images/shop/phonecase2.jpg",
                title: "游戏手机",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/watch1.jpg",
                title: "智能手表",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/watch2.jpg",
                title: "运动手表",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/card.jpg",
                title: "图鸟服务",
              },
            ],
          },
          {
            title: "医疗保健",
            classify: [
              {
                image: "https://resource.tuniaokj.com/images/shop/bag1.jpg",
                title: "环保袋",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/bag2.jpg",
                title: "手提袋",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/cup1.jpg",
                title: "奶茶杯",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/cup2.jpg",
                title: "纸杯",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/pillow.jpg",
                title: "抱枕",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/sticker.jpg",
                title: "贴纸",
              },
            ],
          },
          {
            title: "计生情趣",
            classify: [
              {
                image: "https://resource.tuniaokj.com/images/shop/bag1.jpg",
                title: "环保袋",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/bag2.jpg",
                title: "手提袋",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/cup1.jpg",
                title: "奶茶杯",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/cup2.jpg",
                title: "纸杯",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/pillow.jpg",
                title: "抱枕",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/pillow2.jpg",
                title: "蓝色抱枕",
              },
            ],
          },
          {
            title: "美妆护肤",
            classify: [
              {
                image: "https://resource.tuniaokj.com/images/shop/bag1.jpg",
                title: "环保袋",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/bag2.jpg",
                title: "手提袋",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/cup1.jpg",
                title: "奶茶杯",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/cup2.jpg",
                title: "纸杯",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/pillow.jpg",
                title: "抱枕",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/pillow2.jpg",
                title: "蓝色抱枕",
              },
            ],
          },
          {
            title: "箱包",
            classify: [
              {
                image: "https://resource.tuniaokj.com/images/shop/bag1.jpg",
                title: "环保袋",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/bag2.jpg",
                title: "手提袋",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/cup1.jpg",
                title: "奶茶杯",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/cup2.jpg",
                title: "纸杯",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/pillow.jpg",
                title: "抱枕",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/pillow2.jpg",
                title: "蓝色抱枕",
              },
            ],
          },
          {
            title: "鞋靴",
            classify: [
              {
                image: "https://resource.tuniaokj.com/images/shop/bag1.jpg",
                title: "环保袋",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/bag2.jpg",
                title: "手提袋",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/cup1.jpg",
                title: "奶茶杯",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/cup2.jpg",
                title: "纸杯",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/pillow.jpg",
                title: "抱枕",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/pillow2.jpg",
                title: "蓝色抱枕",
              },
            ],
          },
          {
            title: "钟表珠宝",
            classify: [
              {
                image: "https://resource.tuniaokj.com/images/shop/bag1.jpg",
                title: "环保袋",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/bag2.jpg",
                title: "手提袋",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/cup1.jpg",
                title: "奶茶杯",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/cup2.jpg",
                title: "纸杯",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/pillow.jpg",
                title: "抱枕",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/pillow2.jpg",
                title: "蓝色抱枕",
              },
            ],
          },
          {
            title: "生活旅行",
            classify: [
              {
                image: "https://resource.tuniaokj.com/images/shop/bag1.jpg",
                title: "环保袋",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/bag2.jpg",
                title: "手提袋",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/cup1.jpg",
                title: "奶茶杯",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/cup2.jpg",
                title: "纸杯",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/pillow.jpg",
                title: "抱枕",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/pillow2.jpg",
                title: "蓝色抱枕",
              },
            ],
          },
          {
            title: "计生情趣",
            classify: [
              {
                image: "https://resource.tuniaokj.com/images/shop/bag1.jpg",
                title: "环保袋",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/bag2.jpg",
                title: "手提袋",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/cup1.jpg",
                title: "奶茶杯",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/cup2.jpg",
                title: "纸杯",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/pillow.jpg",
                title: "抱枕",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/pillow2.jpg",
                title: "蓝色抱枕",
              },
            ],
          },
          {
            title: "电脑办公",
            classify: [
              {
                image: "https://resource.tuniaokj.com/images/shop/bag1.jpg",
                title: "环保袋",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/bag2.jpg",
                title: "手提袋",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/cup1.jpg",
                title: "奶茶杯",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/cup2.jpg",
                title: "纸杯",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/pillow.jpg",
                title: "抱枕",
              },
              {
                image: "https://resource.tuniaokj.com/images/shop/pillow2.jpg",
                title: "蓝色抱枕",
              },
            ],
          },
        ],
      },
      // 分类菜单item的信息
      tabbarItemInfo: [],
      // scrollView的top值
      scrollViewBasicTop: 0,
      // scrollView的高度
      scrollViewHeight: 0,
      // 左边scrollView的滚动高度
      leftScrollViewTop: 0,
      // 右边scrollView的滚动高度
      rightScrollViewTop: 0,
      // 当前选中的tabbar序号
      currentTabbarIndex: 0,
    };
  },
  mounted() {
    console.log("Classify component mounted");
    this.$nextTick(() => {
      this.getScrollViewInfo();
      this.getTabbarItemRect();
    });
  },
  computed: {
    tabbarItemClass() {
      return (index) => {
        if (index === this.currentTabbarIndex) {
          return " tn-shadow-lime tn-classify__tabbar__item--active"; //  tn-bg-white
        } else {
          let clazz = " ";
          if (
            this.currentTabbarIndex > 0 &&
            index === this.currentTabbarIndex - 1
          ) {
            clazz += " tn-classify__tabbar__item--active--prev";
          }
          if (
            this.currentTabbarIndex < this.tabbar.length &&
            index === this.currentTabbarIndex + 1
          ) {
            clazz += " tn-classify__tabbar__item--active--next";
          }
          return clazz;
        }
      };
    },
  },

  methods: {
    // 获取scrollView的高度信息
    getScrollViewInfo() {
      // 获取搜索栏的bottom信息，然后用整个屏幕的可用高度减去bottom的值即可获取scrollView的高度(防止双重滚动)
      const query = uni.createSelectorQuery().in(this);
      query
        .select(".tn-classify__search--wrap")
        .boundingClientRect((rect) => {
          // 如果获取失败重新获取
          if (!rect) {
            setTimeout(() => {
              this.getScrollViewInfo();
            }, 10);
            return;
          }
          // 获取当前屏幕的可用高度
          const systemInfo = uni.getSystemInfoSync();
          this.scrollViewBasicTop =
            systemInfo.statusBarHeight + rect.bottom + uni.upx2px(10);
          this.scrollViewHeight =
            systemInfo.safeArea.height +
            systemInfo.statusBarHeight -
            rect.bottom -
            uni.upx2px(10);
        })
        .exec();
    },
    // 获取分类菜单每个item的信息
    getTabbarItemRect() {
      let view = uni.createSelectorQuery().in(this);
      for (let i = 0; i < this.tabbar.length; i++) {
        view.select("#tabbar_item_title_" + i).boundingClientRect();
      }
      let that = this;
      view.exec((res) => {
        if (!res.length) {
          setTimeout(() => {
            this.getTabbarItemRect();
          }, 10);
          return;
        }
        // 将每个分类item的相关信息
        res.map((item) => {
          if (item) {
            that.tabbarItemInfo.push({
              top: item.top,
              height: item.height,
            });
          }
        });
      });
    },
    // 点击了分类导航
    clickClassifyNav(index) {
      if (this.currentTabbarIndex === index) {
        return;
      }
      this.currentTabbarIndex = index;
      this.handleLeftScrollView(index);
      this.switchClassifyContent();
    },
    // 点击分类后，处理scrollView滚动到居中位置
    handleLeftScrollView(index) {
      const itemInfo = this.tabbarItemInfo[index];
      if (!itemInfo || typeof itemInfo.top === "undefined") {
        return;
      }

      // 计算目标项的位置
      const itemTop = itemInfo.top;
      const itemHeight = itemInfo.height;
      const scrollViewTop = this.scrollViewBasicTop;
      const scrollViewHeight = this.scrollViewHeight;

      // 计算需要滚动的位置
      let scrollTop = 0;
      if (itemTop > scrollViewTop + scrollViewHeight / 2) {
        // 如果目标项在可视区域下方，滚动到目标项上方
        scrollTop =
          itemTop - scrollViewTop - scrollViewHeight / 2 + itemHeight / 2;
      } else if (itemTop < scrollViewTop) {
        // 如果目标项在可视区域上方，滚动到目标项
        scrollTop = itemTop - scrollViewTop;
      }

      // 设置滚动位置
      this.rightScrollViewTop = scrollTop;
    },
    // 切换对应分类的数据
    switchClassifyContent() {
      this.rightScrollViewTop = 1;
      this.$nextTick(() => {
        this.rightScrollViewTop = 0;
      });
      this.classifyContent.subClassify[0].title =
        this.tabbar[this.currentTabbarIndex];
    },
  },
};
</script>

<style lang="scss" scoped>
.pages {
  min-height: 100vh;
}

/* 底部安全边距 start*/
.tn-tabbar-height {
  min-height: 60rpx;
  height: calc(80rpx + env(safe-area-inset-bottom) / 2);
  height: calc(80rpx + constant(safe-area-inset-bottom));
}

/* 底部tabbar假阴影 start*/
.bg-tabbar-shadow {
  box-shadow: 0rpx 0rpx 220rpx 0rpx rgba(0, 0, 0, 0.55);
  position: fixed;
  bottom: -100rpx;
  height: 100rpx;
  width: 100vw;
  z-index: 1;
}

.tn-classify {
  &__wrap {
    min-height: 100vh;
  }

  /* 搜索栏 start */
  &__search {
    &--wrap {
      height: 100rpx;
      padding: 20rpx 30rpx;
    }

    &__box {
      height: 60rpx;
      border-radius: 30rpx;
      padding: 0 30rpx;
      font-size: 28rpx;
    }

    &__icon {
      margin-right: 10rpx;
      font-size: 32rpx;
    }
  }
  /* 搜索栏 end */

  /* 分类列表和内容 strat */
  &__container {
    padding-top: 10rpx;
    &__wrap {
      min-height: calc(100vh - 100rpx);
    }
  }

  &__left-box {
    width: 180rpx;
    height: 100%;
  }

  &__right-box {
    flex: 1;
    padding: 20rpx;
  }
  /* 分类列表和内容 end */

  /* 侧边导航 start */
  &__tabbar {
    &__item {
      height: 100rpx;
      font-size: 28rpx;
      color: #f8f4f4;
      position: relative;

      &:first-child {
        border-top-right-radius: 0rpx;
      }

      &:last-child {
        border-bottom-right-radius: 0rpx;
      }

      &--active { 
        color: #e9ecea;
        font-weight: bold;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 8rpx;
          height: 40rpx;
          background-color: #556761;
          border-radius: 4rpx;
        }
      }
    }
  }
  /* 侧边导航 end */

  /* 分类内容 start */
  &__content {
    margin: 10rpx;

    /* 推荐商品 start */
    &__recomm {
      margin-bottom: 30rpx;
    }
    /* 推荐商品 end */

    /* 子栏目 start */
    &__sub-classify {
      margin-bottom: 30rpx;

      &--title {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
      }

      &__content {
        &__item {
          width: 33.33%;
          padding: 10rpx;
          box-sizing: border-box;
        }

        &__image {
          width: 100%;
          height: 160rpx;
          border-radius: 12rpx;
          overflow: hidden;
          margin-bottom: 10rpx;

          image {
            width: 100%;
            height: 100%;
          }
        }

        &__title {
          font-size: 24rpx;
          color: #666666;
          text-align: center;
        }
      }
    }
    /* 子栏目 end */
  }
  /* 分类内容 end */
}
</style>
